<template>
  <!-- <div class="content-box">
    <common-header :title="title" ></common-header> -->
    <div class="page-content">
      <van-field
        v-model="count"
        type="number"
        clearable
        label="投资金额"
        placeholder="请输入投资金额"
        required
        :error-message="countMessage"
      >
        <span slot="right-icon">元</span>
      </van-field>
      <van-field
        v-model="dateRange"
        type="number"
        clearable
        label="投资期限"
        placeholder="请输入投资期限"
        required
        :error-message="dateRangeMessage"
      >
        <span slot="right-icon">天</span>
      </van-field>
      <van-field
        v-model="dayPer"
        type="text"
        clearable
        label="日化利率"
        placeholder="请输入日化利率"
        required
        :error-message="dayPerMessage"
      >
        <span slot="right-icon">%</span>
      </van-field>
      <div class="payDetails">
        <div class="title">还款方式</div>
        <div class="text">
          <p @click="show">{{pickerValue.text}}</p>
        </div>
      </div>
      <div class="btnPay" @click="finish()">计算收益</div>
      <div class="btnPay" @click="reset()" style="background:#07c160">重新计算</div>
      <commonFooter></commonFooter>
      <van-popup v-model="pickerVisible" position="bottom">
        <van-picker
          show-toolbar
          :defaultIndex="0"
          :columns="pickData"
          @cancel="pickerVisible = false"
          @confirm="onConfirm"
        />
      </van-popup>
    </div>
  <!-- </div> -->
</template>
<script>
import { commonHeader, commonFooter } from "common";
import { integer, perReg } from "@/utils/regRex";
// import VuePicker from "vue-pickers";
export default {
  name: "recharge",
  components: {
    commonHeader,
    commonFooter
  },
  mounted() {
    this.reset()
  },
  methods: {
    reset() {
      this.pickerValue = this.pickData[0];
      this.count = "";
      this.dateRange = "";
      this.dayPer = "";
      this.countMessage = "";
      this.dateRangeMessage = "";
      this.dayPerMessage = "";
    },
    onConfirm(value) {
      this.pickerValue = value;
      this.pickerVisible = false;
    },
    show() {
      this.pickerVisible = true;
    },
    finish() {
      let _this = this;
      this.countMessage = "";
      this.dateRangeMessage = "";
      this.dayPerMessage = "";
      if (!this.count) {
        this.countMessage = "请输入投资金额";
      } else if (!integer.test(this.count)) {
        this.countMessage = "投资金额为正整数";
      }
      if (!this.dateRange) {
        this.dateRangeMessage = "请输入投资期限";
      } else if (!integer.test(this.dateRange)) {
        this.dateRangeMessage = "投资期限为正整数";
      }
      if (!this.dayPer) {
        this.dayPerMessage = "请输入日利率";
      } else if (!perReg.test(this.dayPer)) {
        this.dayPerMessage = "请输入正确的日利率";
      } else if (integer.test(this.count) && integer.test(this.dateRange)) {
        this.$toast({
          message: "正在计算，请稍后",
          duration: 1000,
          onClose: function() {
            _this.$router.push({path:"/home/yieldResult",query:{count:_this.count,dateRange:_this.dateRange,dayPer:_this.dayPer,pickerValue:_this.pickerValue.value}});
          }
        });
      }
    }
  },
  data() {
    return {
      pickerValue: "",
      pickData: [
        {
          text: "每日返息，到期还本",
          value: 1
        },
        {
          text: "每日复利，保本保息",
          value: 2
        },
        {
          text: "一次性还本付息",
          value: 3
        },
        {
          text: "实时返息，到期还本",
          value: 4
        }
      ],
      pickerVisible: false,
      title: "计算收益",
      count: "",
      dateRange: "",
      dayPer: "",
      countMessage: "",
      dateRangeMessage: "",
      dayPerMessage: ""
    };
  }
};
</script>
<style lang="less" scoped>
@import "~styles/variable.less";
</style>